{template 'common/header'}
<title>商品分类</title>
<link rel="stylesheet" type="text/css" href="../addons/ewei_shop/template/mobile/jingwaigou/new/category.css">
<style type="text/css">
    /*.调用category.css，下面css失效
    body {margin:0px;padding:0px; width:100%; height:100%; background:#fff; color:#fff; }
 .topbar {position:fixed;top:0px;width:100%; height:40px;  background:#f9f9f9; border-bottom:1px solid #e8e8e8; font-size:16px; line-height:40px; text-align:center; color:#666;}
    .topbar a {height:40px; width:15px; display:block; float:left; margin-left:10px;outline:0px; color:#999; font-size:24px;}
 
    .main {position:fixed;top:41px;  height:100%;}
   .search {height:40px;margin-left:30px; color:#ccc; line-height:40px; font-size:14px; text-align:center;}
    #left_container { float:right;width:90px;height:100%;background:#efefef;overflow:auto;}
    #left_container .parent_item {width:94%; padding:0 3%; height:35px;line-height:35px;font-size:13px;float:left; text-align:center; color:#333;}
    #left_container .on {background:#fff;}
    
    #right_container { float:right;margin-right:-90px;width:100%;height:100%; z-index:1;}
    #right_container .inner { margin-right: 90px; background:#fff;height:90%;padding:10px 10px  25px 10px;;overflow:auto;}
    #right_container .inner .category_item { width:29%;float:left;padding:4px; overflow:hidden;color:#333;font-size:13px; text-align: center;}
    #right_container .inner .category_item .name {height:16px;overflow:hidden;width:100%;}
    #right_container .inner img{width:100%;}
    
    #right_container .inner .category_no {width:100%;height:100px;color:#333; text-align: center;}
   
    
    #category_loading { width:94%;padding:10px;color:#666;text-align: center;float:right;}
    */
</style>


<div id='container'></div>

<script id='tpl_main' type='text/html'>
   <div class="topbar"><a href="javascript:history.back()"><i class="fa fa-angle-left"></i></a>
    <div class='search'><i class="fa fa-search"></i> 在店铺内搜索</div>
   </div>
     <!--搜索-->
    <div class="search1">
                <div class="topbar1">
                    <div class='right'>
                        <button class="sub1"><i class="fa fa-search"></i></button>
                        <div class="home1">取消</div>
                    </div>
                    <div class='left_wrap'>
                        <div class='left'>
                            <input type="text" id='keywords' class="input1" placeholder='搜索: 输入商品关键词' value='{$_GPC['keywords']}'/>
                        </div>
                    </div>
                </div>
                <div id='search_container' class='result1'>
        </div>
     </div>
     
     
     <div class="main">
       
         <div id="right_container"><div class="inner"></div></div>
           <div id="left_container"></div>
         
     </div>
</script>
<script id='tpl_search_list' type='text/html'>
     <ul>
     <%each list as value%>
        <li><i class="fa fa-angle-right"></i> <a href="{php echo $this->createMobileUrl('shop/detail')}&id=<%value.id%>"><%value.title%></a></li>
        <%/each%>
    </ul> 
</script>
<!--
<script id='tpl_parent_list' type='text/html'>
    <div class="parent_item on"  data-cate="rec">推荐分类</div>
    <%each category as value%>
    <div class="parent_item" data-cate="<%value.id%>">
        <%value.name%>
    </div>
    <%/each%>
</script>
-->

<script id='tpl_parent_list' type='text/html'>
    <div class="parent_item on"  data-cate="rec">全球热门</div>
    <%each category as value%>
    <div class="parent_item" data-cate="<%value.id%>">
        <%value.name%>
    </div>
    <%/each%>
</script>
<script id='tpl_child_list' type='text/html'>
    <%each category as value%>
    <div class="category_item"  data-pcate="<%value.parentid%>"  data-ccate="<%value.id%>">
        <img src="<%value.thumb%>" />
        <div class="name"><%value.name%></div>
    </div>
    <%/each%>
    <%if !category%>
    <div class='category_no'>
        <i class='fa fa-file-text-o'></i>  暂时相关分类</div>
    <%/if%>
</script>
 
<script language='javascript'>
    var category = [];
    var children = [];
    var recommand = [];
    require(['tpl', 'core'], function (tpl, core) {
     
     function bindChildEvents(){
          $('.category_item').unbind('click').click(function(){
                            var pcate = $(this).data('pcate');
                            var ccate = $(this).data('ccate');
                            location.href = core.getUrl('shop/list',{pcate:pcate,ccate:ccate});
                      })
     }
        function setCategory(catid){
 
            var ret = null;
            if(catid=='rec'){
                recommand = [];
                for(i in category){
              
                    if(category[i].isrecommand=='1'){
                        recommand.push(category[i]);
                    }
                    if(category[i].children.length>0){
                           for(j in category[i].children){
                                if(category[i].children[j].isrecommand==1){
                                        recommand.push(category[i].children[j]);
                                 }
                           }
                    }
                }
                ret = recommand;
            } else {
               
                for(i in category){
                    if( category[i].id==catid){
                          ret =  category[i].children;
                          break;
                    }
                }
           }
          $('#right_container  .inner').html(tpl('tpl_child_list',{category:ret}));
          setTimeout(function(){
            $('#right_container .inner img').each(function(){
                $(this).height($(this).width());
            });
          },10);
           bindChildEvents(); ;
        }
        core.json('shop/util',{op:'category'}, function (json) {
                 result = json.result;
                 category = result.category;
                 $('#container').append(tpl('tpl_main'));
           
           $('.main').height($(document.body).height()-90);
                 $('#left_container').html(tpl('tpl_parent_list',result));
                 
            
                 setCategory('rec');
                 
                 $('.parent_item').click(function(){
                     $('.parent_item').removeClass('on');
                     $(this).addClass('on');
                     setCategory($(this).data('cate'));
                  })
                  
                 
                 
                    $('.search').click(function(){

                       $(".search1").animate({bottom:"0px"},100);
                       $('#keywords').focus().unbind('keyup').keyup(function(){
                                var keywords = $.trim( $(this).val());
                                if(keywords==''){
                                    $('#search_container').html("");         
                                    return;
                                }
                                core.json('shop/util',{op:'search',keywords:keywords }, function (json) {
                                     var result = json.result;
                                     if(result.list.length>0){
                                        $('#search_container').html(tpl('tpl_search_list',result));    
                                     }
                                     else{
                                        $('#search_container').html("");         
                                     }

                                  }, true);
                        });
                        $('.search1 .home1').unbind('click').click(function(){
                             $(".search1").animate({bottom:"-100%"},100);
                        });
                    });
        
        }, true);
 
        $('.sort').click(function () {
                var display = $(".sort_list").css('display');
                if (display == 'none') {
                    $(".sort_list").fadeIn(200);
                } else {
                    $(".sort_list").fadeOut(100);
                }

        });
     
    });
</script>
{php $show_footer = true;}
{template 'common/footer'}
